<template>
    <!-- 日期时间选择组件 -->
    <div class="pane-group">
        <card-pane>
            <template v-slot:title>
                <span class="label">
                    <svg-icon
                        icon-class="font-layout-2-fill"
                        class="font-layout-2-fill"
                    />
                    <span class="text">日期时间选择组件</span>
                </span>
            </template>
            <template v-slot:list>
                <draggable
                    class="list-group"
                    :list="inputList"
                    :group="inputDraggable"
                    :sort="false"
                    :clone="hadnelCloneInput"
                >
                    <transition-group>
                        <div
                            class="component-item"
                            :class="inputDraggable.disabled ? 'disabled' : ''"
                            v-for="item in inputList"
                            :key="item.name"
                        >
                            <svg-icon
                                :icon-class="item.icon"
                                :class="item.icon"
                            />
                            <span class="label">
                                {{ item.name }}
                            </span>
                        </div>
                    </transition-group>
                </draggable>
            </template>
        </card-pane>
    </div>
</template>
<script>
import { getUuid } from '@/utils/tool'
import CardPane from '../base/components/cardPane'
export default {
    components: {
        CardPane
    },
    data() {
        return {
            // 选中的行
            activeRow: {},
            inputList: [
                {
                    type: 'dateTimePicker',
                    name: '日期选择器',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'datePicker',
                        type: 'date',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false,
                        format: 'yyyy-MM-dd',
                        valueFormat: 'yyyy-MM-dd'
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '多个日期',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'datePicker',
                        type: 'dates',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择日期',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false,
                        format: 'yyyy-MM-dd',
                        valueFormat: 'yyyy-MM-dd'
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '日期范围',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'datePicker',
                        type: 'daterange',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择日期',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false,
                        format: 'yyyy-MM-dd',
                        valueFormat: 'yyyy-MM-dd',
                        rangeSeparator: '-',
                        startPlaceholder: '开始日期',
                        endPlaceholder: '结束日期'
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '月份选择器',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'datePicker',
                        type: 'month',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择月份',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false,
                        format: 'MM',
                        valueFormat: 'MM'
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '多个月份选择器',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'datePicker',
                        type: 'months',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择月份',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false,
                        format: 'MM',
                        valueFormat: 'MM'
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '月份范围选择器',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'datePicker',
                        type: 'monthrange',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择月份',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false,
                        format: 'MM',
                        valueFormat: 'MM',
                        startPlaceholder: '开始月份',
                        endPlaceholder: '结束月份',
                        rangeSeparator: '-'
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '年份选择器',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'datePicker',
                        type: 'year',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择年份',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '多个年份选择器',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'datePicker',
                        type: 'years',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择多个年份',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '周选择器',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'datePicker',
                        type: 'week',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择周',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false,
                        format: 'yyyy 第 WW 周',
                        valueFormat: 'yyyy 第 WW 周'
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '固定时间选择器',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'timePicker',
                        type: 'select',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择时间',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false,
                        format: 'HH-mm',
                        valueFormat: 'HH-mm',
                        pickerOptions: {
                            start: '00:00',
                            end: '23:59',
                            step: '00:30',
                            minTime: '00:00',
                            maxTime: '23:59'
                        }
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '任意时间选择器',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'timePicker',
                        type: 'picker',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择时间',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false,
                        format: 'HH-mm',
                        valueFormat: 'HH-mm'
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '时间段选择器',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'timePicker',
                        type: 'picker',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择时间段',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false,
                        format: 'HH-mm',
                        valueFormat: 'HH-mm',
                        isRange: true,
                        startPlaceholder: '开始时间',
                        endPlaceholder: '结束时间',
                        rangeSeparator: '-'
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '日期时间',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'dateTimePicker',
                        type: 'datetime',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择日期时间',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false,
                        format: 'yyyy-MM-DD HH:mm:ss',
                        valueFormat: 'yyyy-MM-DD HH:mm:ss'
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'dateTimePicker',
                    name: '日期时间范围',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'dateTimePicker',
                        type: 'datetimerange',
                        prop: '',
                        label: '',
                        width: 'w-1',
                        placeholder: '请选择日期时间',
                        disabled: false,
                        clearable: false,
                        readonly: false,
                        editable: false,
                        format: 'yyyy-MM-DD HH:mm:ss',
                        valueFormat: 'yyyy-MM-DD HH:mm:ss',
                        startPlaceholder: '开始时间',
                        endPlaceholder: '结束时间',
                        rangeSeparator: '-'
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                }
            ],
            // 表单拖拽配置项
            inputDraggable: {
                name: 'formComponent',
                pull: false,
                put: false,
                disabled: true
            }
        }
    },
    mounted() {
        this.$bus.$on('ActiveView', row => {
            this.activeRow = row
            if (JSON.stringify(this.activeRow) !== '{}') {
                this.inputDraggable.pull = 'clone'
                this.inputDraggable.disabled = false
            } else {
                this.inputDraggable.pull = false
                this.inputDraggable.disabled = true
            }
        })
    },
    methods: {
        /**
         * 克隆表单容器开始
         */
        hadnelCloneInput(origin) {
            const data = JSON.parse(JSON.stringify(origin))
            data.id = getUuid()
            data.key = getUuid()
            data.pid = this.activeRow.id
            data.value.label = getUuid(4)
            data.value.prop = getUuid(4)
            return data
        }
    }
}
</script>
<style lang="scss" scoped>
@import './styles/base';
</style>
